<template>
	<view class="filterWrapper">
		<!--<view class="title-padding"></view>-->
		<!-- <view class="filterHeader">
			<text class="pd" @tap="back()"></text>
			<text class="title">筛选</text>
			<view class="options">
				<button class="setting" @tap="changeDate()"></button>
			</view>
		</view> -->
		<view class="filterItem">
		<!-- 	<text>
				条码
			</text>
			<input type="text" placeholder="条码" v-model="BarCode" /> -->
			<text>
				条码
			</text>
			<input type="text" placeholder="点击编辑条码" v-model="BarCode" />
			<button class="cu-btn stop text-white" @tap="clearFilter(0)">清空</button>
		</view>
		<view class="filterItem">
			<text>
				商品名称
			</text>
			<input type="text" placeholder="点击选取商品名称" :value="GoodsName" @tap="showGoodName" disabled/>
			<button class="cu-btn stop text-white" @tap="clearFilter(1)">清空</button>
		<!-- 	<text>
				商品名称
			</text>
			<input type="text" placeholder="商品名称" v-model="GoodsName" @tap="showGoodName" /> -->
			<!-- <button class="cu-btn stop text-white" v-show="showcxbtn == true" >选择</button> -->
		</view>
		<view class="filterItem">
			<text>
				仓库名称
			</text>
			<input type="text" placeholder="点击选取仓库" :value="StoreName" @tap="chooseModal(0)" disabled/>
			<button class="cu-btn stop text-white" @tap="clearFilter(2)">清空</button>
		<!-- 	<text>
				仓库名称
			</text>
			<view class="selectInput" @tap="chooseModal(0)"> -->
				<!-- <xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false" :style_Container="'height: 40px; font-size: 16px;'"
				 :placeholder="'placeholder'" :initValue="'仓库'" :selectHideType="'hideAll'" @change="getSelectValue($event)">
				</xfl-select> -->
				<!-- {{StoreName == ''?"点击选取仓库":StoreName}}
			</view> -->
		</view>
		<view class="cu-modal" :class=" StoreModal ?'show':'hide'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请选择仓库员</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white">
					<view class="searchStore">
						<input placeholder="请输入仓库名称或编号" placeholder-style="text-align: left; font-size: 14px;" v-model="SearchName" @input="filter"/>
						<button @tap="searchStore">搜索</button>
					</view>
					<view class="StoreListWrap">
						<view v-for="(item,index) in TempEList" :key="index" @tap="selectScanGood(index)">{{item.StoreName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	import * as Api from '@/syApis/syBb/apis.js'
	import * as Api1 from '@/syApis/syAddOrder/syaddApis.js'
	export default {
		components: {
			QSpicker,
			xflSelect
		},
		data() {
			return {
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']
				},
				StoreModal: false,
				StoreName: "",
				EList: [],
				SearchName: '',
				startAndEndTime: 0,
				startTime: 0,
				endTime: 0,
				dateName: "",
				ClientName: "",
				GoodsName: "",
				//条码
				BarCode: "",
				//仓库
				StoreID: "",
				showcxbtn: false,
				TempEList:[]
			};
		},
		created() {
			let date = new Date();
			this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			// 
			// this.GetStoreMessage();
		},
		methods: {
			clearFilter(type){
				if(type==0){
					this.BarCode = "";
				}else if(type==1){
					this.GoodsName = "";
				}else{
					this.StoreName = "";
					this.StoreID = "";
				}
			},
			//过滤条件
			filter(e){
				let TempList = [];
			   this.EList.forEach((item,index)=>{
				   if(item.StoreName.indexOf(e.detail.value)>-1){
					      TempList.push(item);
				   }
			   });
			   if(TempList.length==0){
				   Api.showTip("查无数据");
			   }
			   
			   this.TempEList = TempList;
			 },
			//显示仓库
			ShowStore(Filter = '') {
				let data = {
					Filter: Filter
				};
				var that = this;
				Api.GetStoreMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							// api.showTip()
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg)
						} else {
							res.data.ResultMsg.forEach((item, index) => {
								res.data.ResultMsg[index].StoreName = item.StoreName;
							})
							that.EList = res.data.ResultMsg;
							that.TempEList = res.data.ResultMsg;
							that.SearchName = ""
							// that.ClientNameList =JSON.stringify(res.data.ResultMsg) ;
						}
					} else {
						Api.showTip("服务器连接超时")
					}
				});
			},
			//打开弹框
			chooseModal(type) {
				switch (type) {
					case 0:
						this.StoreModal = true;
						this.isStore = true
						this.ShowStore()
						break;
				}
			},
			//关闭弹框
			hideModal() {
				this.StoreModal = false
			},
			selectScanGood(index) {
				console.log(index)
				this.StoreModal = false
				this.StoreName = this.TempEList[index].StoreName
				this.StoreID = this.TempEList[index].StoreID
			},
			//搜索
			searchStore() {
				// if (this.SearchEName != '') {
				// 	let Filter = "StoreName like '%" + this.SearchName + "%' or StoreCode like '%" + this.SearchName + "%'";
				// 	this.ShowStore(Filter);
				// } else {
				// 	this.ShowStore();
				// }
				let data = {
					detail:{
						value:this.SearchName
					}
				}
				this.filter(data);
			},

			custormInput() {
				console.log(this);
			},
			//修改数据
			
			// #ifndef MP
			onNavigationBarButtonTap(e) {
				const index = e.index;
				if (index === 0) {
					var pages = getCurrentPages(),
						prevPage = null;
					if (pages.length > 1) {
						prevPage = pages[pages.length - 2];
					}
					var that = this;
					let data = {
						BarCode: this.BarCode,
						GoodsName: this.GoodsName,
						StoreID: this.StoreID
					};
					this.$eventHub.$emit('fire', data);
					uni.navigateBack({
						delta: 1
					})
				}
			},
			// #endif
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeShow(name, type) {
				this.startAndEndTime = type;
				this.$refs[name].show();
				this.dateName = name;
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {

			},
			confirm(res) {
				if (this.startAndEndTime == 0) {
					this.startTime = res.data;
				} else {
					this.endTime = res.data;
				}
				this.$refs[this.dateName].hide();
			},

			showbtn(e) {
				this.showcxbtn = true;
			},
			//到查询商品界面
			showGoodName(e) {
				this.AddGoodListen();
				uni.navigateTo({
					url: '../goodselect/goodselect'

				})
			},
			AddGoodListen() {
				var _this = this;
				let data = {
					GoodsName: this.GoodsName
				}
				this.$eventHub.$on('GoodsListen', function(data) {
					data = JSON.parse(data);
					_this.GoodsName = data.GoodsName
					_this.$eventHub.$off('GoodsListen');
					// console.log(ClientName)
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/static/bbCss/bbFilter.scss';
	/* $bb-bg-color:rgba(124, 170, 216, 1);

	button::after {
		border: none;
		padding: 0px;
	}

	page {
		width: 100%;
		height: 100%;
		background: #ebebeb;
	}

	.filterWrapper {
		background: #FFF;
		padding-bottom: 15upx;
	}

	.title-padding {
		height: var(--status-bar-height);
		background: $bb-bg-color;
		box-sizing: content-box;
	}

	.filterHeader {
		width: 100%;
		height: 50px;
		line-height: 50px;
		position: relative;
		text-align: center;
		background: $bb-bg-color;
		color: #FFF;
		font-size: 18px;
		background-size: 100%;

		.pd {
			display: inline-block;
			position: absolute;
			margin-left: 10px;
			top: 30upx;
			left: 0px;
			font-size: 14px;
			width: 40upx;
			height: 40upx;
			background: url(../../static/back.png) no-repeat;
			background-size: 100%;
		}

		.options {
			position: absolute;
			right: 0px;
			top: 10px;
			width: 80px;
			display: flex;
			text-align: right;

			.setting {
				width: 30px;
				height: 30px;
				background: url(../../static/sureFilter.png) no-repeat;
				background-size: 30px;
				border: none;
				margin-left: 90upx;

			}
		}

	}

	.filterItem {
		height: 120upx;
		line-height: 120upx;
		background: #FFF;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		padding-left: 30upx;
		padding-right: 30upx;
		font-size: 32upx;
		background: #FFF;

		text {
			flex: 1;

			&:last-child {
				text-align: right;
			}
		}

		.stop {
			background-color: rgb(124, 170, 216);
		}

		input {
			flex: 1;
			height: 60upx;
			line-height: 60upx;
			margin-top: 40upx;
			border-bottom: 1px solid #ebebeb;
		}

		view.selectInput {
			flex: 1;
			height: 60upx;
			line-height: 60upx;
			margin-top: 22upx;
			border-bottom: 1px solid #ebebeb;

			input {
				flex: 1;
				height: 40upx;
				line-height: 40upx;
				margin-top: 50upx;
				border-bottom: 1px solid #ebebeb;
			}
		}
	}

	.padding-xl .searchStore {
		display: flex;
		width: 100%;
		margin: auto;
		height: 45px;
		padding-top: 5px;
		font-size: 14px;
	}

	.padding-xl .searchStore input {
		flex: 1;
		height: 35px;
		border: 1px solid #CCC;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		padding-left: 10px;
		text-align: left;
	}

	.padding-xl {
		padding: 10px;

	}

	.padding-xl .searchStore button {
		font-size: 14px;
		color: #FFF;
		padding-left: 8px;
		padding-right: 8px;
		height: 35px;
		line-height: 35px;
		border-radius: 0px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		text-align: center;
		background: rgba(124, 170, 216, 1);
	}

	.padding-xl .StoreListWrap {
		height: 250px;
		overflow: auto;
	}

	.padding-xl .StoreListWrap view {
		height: 40px;
		line-height: 40px;
		text-align: left;
		border-bottom: 1px solid #CCC;
		padding-left: 8px;
	} */
</style>
